<template>
	<div class="zy-content pb50">
		<back-level :go-page="backPage" />
		<Card :title="`${$t('fault.WorkOrderInformation')}`" class="detail-content-layout">
			<div class="basic-info">
				<div class="basic-info-body">
					<Row style="border-top: 1px solid #eee; border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.RepairFormNumber') }}</Col>
								<!--维修单号-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.workOrderNo }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('故障时间') }}</Col>
								<!--验收人-->
								<Col class="basic-info-body-item editWrap" span="24">
									<div v-if="!updateTime9">
										{{ detailObj.faultTime }}
										<div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.faultTime">
											<div class="handle-btn-item" @click="(updateTime9 = true), (faultTime = '')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ updateTime9 ? $t('保存') : $t('common.Revise') }}</span>
											</div>
											<div class="handle-btn-item" @click="viewEditTimeRecord('F')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ $t('修改记录') }}</span>
											</div>
										</div>
									</div>
									<DatePicker
										v-if="updateTime9"
										class="dateform"
										:options="optionsdate"
										v-model="faultTime"
										type="datetime"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeComplete('F', 'updateTime9')"
										@on-open-change="handleClose($event, 'updateTime9')"
									>
									</DatePicker>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('报修时间') }}</Col>
								<!--维修申请时间-->
								<Col class="basic-info-body-item" span="24">
									<div v-if="!updateTime10">
										{{ $moment(detailObj.maintainApplyTime).format('YYYY-MM-DD HH:mm:ss') }}
										<div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.maintainApplyTime">
											<div class="handle-btn-item" @click="(updateTime10 = true), (faultTime = '')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ updateTime10 ? $t('保存') : $t('common.Revise') }}</span>
											</div>
											<div class="handle-btn-item" @click="viewEditTimeRecord('G')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ $t('修改记录') }}</span>
											</div>
										</div>
									</div>
									<DatePicker
										v-if="updateTime10"
										class="dateform"
										:options="optionsdate"
										v-model="faultTime"
										type="datetime"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeComplete('G', 'updateTime10')"
										@on-open-change="handleClose($event, 'updateTime10')"
									>
									</DatePicker>
								</Col>
							</Row>
						</Col>
					</Row>
					<Row style="border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.AppliedBy') }}</Col
								><!--报修人-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.maintainApplyByStr }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.Description') }}</Col>
								<!--故障现象-->
								<Col class="basic-info-body-item" span="24">
									<Tooltip max-width="200" v-if="detailObj.faultMessage">
										<div class="over-wrapper">{{ detailObj.faultMessage }}</div>
										<div slot="content">
											<p>{{ detailObj.faultMessage }}</p>
										</div>
									</Tooltip>
									<div class="preview" v-if="Array.isArray(detailObj.attachmentDTOs1) && detailObj.attachmentDTOs1.length">
										<Badge :count="Array.isArray(detailObj.attachmentDTOs1) ? detailObj.attachmentDTOs1.length : 0">
											<div class="preview-img">
												<div v-for="(item, index) in detailObj.attachmentDTOs1" :key="index" class="itemCol" @click="previewClicjk(item, index)">
													<span class="item">
														<template v-if="!item.filePath.includes('video')">
															<img :src="util.filePathToUrl(item.filePath)" alt="" />
														</template>
														<template v-else>
															<video preload="auto" loop autoplay muted>
																<source :src="util.filePathToUrl(item.filePath)" type="video/mp4" />
															</video>
														</template>
													</span>
												</div>
											</div>
										</Badge>
									</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<!--是否影响生产-->
								<Col class="basic-info-body-label" span="24">故障详情</Col>
								<Col class="basic-info-body-item" span="24">{{ detailObj.faultDetail }} </Col>
								<!-- <Col class="basic-info-body-label" span="24">{{ $t('fault.ImpactProduction') }}</Col>
								<Col class="basic-info-body-item" span="24">{{ detailObj.affectProductionFlagStr }} </Col> -->
							</Row>
						</Col>
					</Row>
					<Row style="border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.Priority') }}</Col>
								<!--维修紧迫程度-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.maintainGradeStr }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.EscalationLevel') }}</Col>
								<!--工单等级-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.workOrderGradeStr }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.Productionsupervisor') }} </Col
								><!--生产主管确认时间-->
								<Col class="basic-info-body-item editWrap" span="24">
									{{ detailObj.confirmByStr }}
								</Col>
							</Row>
						</Col>
					</Row>
					<Row style="border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.ConfirmedTimeByProduction') }} </Col
								><!--生产主管确认时间-->
								<Col class="basic-info-body-item editWrap" span="24">
									<div v-if="!updateTime1">
										{{ detailObj.managerConfirmTime ? $moment(detailObj.managerConfirmTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
										<div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.managerConfirmTime">
											<div class="handle-btn-item" @click="(updateTime1 = true), (faultTime = '')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ updateTime1 ? $t('保存') : $t('common.Revise') }}</span>
											</div>
											<div class="handle-btn-item" @click="viewEditTimeRecord('A')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ $t('修改记录') }}</span>
											</div>
										</div>
									</div>
									<DatePicker
										v-if="updateTime1"
										class="dateform"
										:options="optionsdate"
										v-model="faultTime"
										type="datetime"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeComplete('A', 'updateTime1')"
										@on-open-change="handleClose($event, 'updateTime1')"
									>
									</DatePicker>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.AcceptingTime') }}</Col>
								<!--接单时间-->
								<Col class="basic-info-body-item editWrap" span="24">
									<div v-if="!updateTime2">
										{{ detailObj.receiveOrderTime ? $moment(detailObj.receiveOrderTime).format('YYYY-MM-DD HH:mm:ss') : '' }}

										<div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.receiveOrderTime">
											<div class="handle-btn-item" @click="(updateTime2 = true), (faultTime = '')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ updateTime2 ? $t('保存') : $t('common.Revise') }}</span>
											</div>
											<div class="handle-btn-item" @click="viewEditTimeRecord('B')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ $t('修改记录') }}</span>
											</div>
										</div>
									</div>
									<DatePicker
										v-if="updateTime2"
										class="dateform"
										:options="optionsdate"
										v-model="faultTime"
										type="datetime"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeComplete('B', 'updateTime2')"
										@on-open-change="handleClose($event, 'updateTime2')"
									>
									</DatePicker>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<!-- <Col class="basic-info-body-label" span="24">{{ $t('fault.DecisionTime') }}</Col>
              //维修判定时间
              <Col class="basic-info-body-item editWrap" span="24">
              <div v-if="!updateTime3">
                {{
                      detailObj.maintainConfirmTime ? $moment(detailObj.maintainConfirmTime).format('YYYY-MM-DD HH:mm:ss')
                        : ''
                    }}
                <div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.maintainConfirmTime">
                  <div class="handle-btn-item" @click="updateTime3 = true, faultTime = ''">
                    <Icon type="ios-create-outline" class="icon" />
                    <span>{{ updateTime1 ? $t('保存'):$t('common.Revise') }}</span>
                  </div>
                  <div class="handle-btn-item" @click="viewEditTimeRecord('C')">
                    <Icon type="ios-create-outline" class="icon" />
                    <span>{{ $t('修改记录') }}</span>
                  </div>
                </div>
              </div>
              <DatePicker v-if="updateTime3" class="dateform" :options="optionsdate" v-model="faultTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                          :placeholder="`${$t('common.selectInfo')}`" @on-ok="handleUpdateTimeComplete('C', 'updateTime3')"
                          @on-open-change="handleClose($event, 'updateTime3')">
              </DatePicker>
              </Col> -->
								<Col class="basic-info-body-label" span="24">{{ $t('fault.StartTime') }}</Col>
								<!--维修开始时间-->
								<Col class="basic-info-body-item editWrap" span="24">
									<div v-if="!updateTime5">
										{{ detailObj.maintainStartTime ? $moment(detailObj.maintainStartTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
										<div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.maintainStartTime">
											<div class="handle-btn-item" @click="(updateTime5 = true), (faultTime = '')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ updateTime5 ? $t('保存') : $t('common.Revise') }}</span>
											</div>
											<div class="handle-btn-item" @click="viewEditTimeRecord('D')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ $t('修改记录') }}</span>
											</div>
										</div>
									</div>
									<DatePicker
										v-if="updateTime5"
										class="dateform"
										:options="optionsdate"
										v-model="faultTime"
										type="datetime"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeComplete('D', 'updateTime5')"
										@on-open-change="handleClose($event, 'updateTime5')"
									>
									</DatePicker>
								</Col>
							</Row>
						</Col>
					</Row>
					<!-- <Row style="border-bottom: 1px solid #eee">
            <Col span="8">
            <Row>
              <Col class="basic-info-body-label" span="24">{{ $t('委外确认人') }}</Col>
              <Col class="basic-info-body-item editWrap" span="24">
              {{(detailObj.maintainJudgeRecordVO || {}).outSourcingBy}}
              </Col>
            </Row>
            </Col>
            <Col span="8">
            <Row>
              <Col class="basic-info-body-label" span="24">委外确认时间</Col>
              <Col class="basic-info-body-item editWrap" span="24">

              <div v-if="!updateTime4">
                {{detailObj.outsourceConfirmTime ? $moment(detailObj.outsourceConfirmTime).format('YYYY-MM-DD HH: mm: ss') : ''}}
                <div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.outsourceConfirmTime">
                  <div class="handle-btn-item" @click="updateTime4 = true, faultTime = ''">
                    <Icon type="ios-create-outline" class="icon" />
                    <span>{{ updateTime4 ? $t('保存'):$t('common.Revise') }}</span>
                  </div>
                  <div class="handle-btn-item" @click="viewEditTimeRecord('H')">
                    <Icon type="ios-create-outline" class="icon" />
                    <span>{{ $t('修改记录') }}</span>
                  </div>
                </div>
              </div>
              <DatePicker v-if="updateTime4" class="dateform" :options="optionsdate" v-model="faultTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                          :placeholder="`${$t('common.selectInfo')}`" @on-ok="handleUpdateTimeComplete('H', 'updateTime4')"
                          @on-open-change="handleClose($event, 'updateTime4')">
              </DatePicker>
              </Col>
            </Row>
            </Col>
            <Col span="8">
            <Row>
              <Col class="basic-info-body-label" span="24">{{ $t('fault.StartTime') }}</Col>
              //维修开始时间
              <Col class="basic-info-body-item editWrap" span="24">
              <div v-if="!updateTime5">
                {{ detailObj.maintainStartTime ? $moment(detailObj.maintainStartTime).format('YYYY-MM-DD HH:mm:ss') : ''
                    }}
                <div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.maintainStartTime">
                  <div class="handle-btn-item" @click="updateTime5 = true, faultTime = ''">
                    <Icon type="ios-create-outline" class="icon" />
                    <span>{{ updateTime5 ? $t('保存'):$t('common.Revise') }}</span>
                  </div>
                  <div class="handle-btn-item" @click="viewEditTimeRecord('D')">
                    <Icon type="ios-create-outline" class="icon" />
                    <span>{{ $t('修改记录') }}</span>
                  </div>
                </div>
              </div>
              <DatePicker v-if="updateTime5" class="dateform" :options="optionsdate" v-model="faultTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                          :placeholder="`${$t('common.selectInfo')}`" @on-ok="handleUpdateTimeComplete('D', 'updateTime5')"
                          @on-open-change="handleClose($event, 'updateTime5')">
              </DatePicker>
              </Col>
            </Row>
            </Col>

          </Row> -->
					<Row>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.RepairPersonnel') }}</Col>
								<!--维修开始时间-->
								<Col class="basic-info-body-item editWrap" span="24">
									{{ detailObj.receiveOrderByStr }}
								</Col>
							</Row>
						</Col>
						<Col span="8" style="border-bottom: 1px solid #eee">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.FinishTime') }}</Col>
								<!--维修完工时间-->
								<Col class="basic-info-body-item editWrap" span="24">
									<div v-if="!updateTime6">
										{{ detailObj.maintainEndTime ? $moment(detailObj.maintainEndTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
										<div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.maintainEndTime">
											<div class="handle-btn-item" @click="(updateTime6 = true), (faultTime = '')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ updateTime6 ? $t('保存') : $t('common.Revise') }}</span>
											</div>
											<div class="handle-btn-item" @click="viewEditTimeRecord('E')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ $t('修改记录') }}</span>
											</div>
										</div>
									</div>
									<DatePicker
										v-if="updateTime6"
										class="dateform"
										:options="optionsdate"
										v-model="faultTime"
										type="datetime"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeComplete('E', 'updateTime6')"
										@on-open-change="handleClose($event, 'updateTime6')"
									>
									</DatePicker>
								</Col>
							</Row>
						</Col>
						<Col span="8" style="border-bottom: 1px solid #eee">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.acceptanceBy') }}</Col>
								<!--验收人-->
								<Col class="basic-info-body-item editWrap" span="24">
									{{ detailObj.maintainCheckByStr }}
								</Col>
							</Row>
						</Col>
					</Row>
					<Row>
						<Col span="8" style="border-bottom: 1px solid #eee">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.AcceptanceTime') }}</Col>
								<!--维修验收时间-->
								<Col class="basic-info-body-item editWrap" span="24">
									<div v-if="!updateTime7">
										{{ detailObj.maintainCheckTime ? $moment(detailObj.maintainCheckTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
										<div v-has="'workOrderHallChangeTime'" class="handle-btn-wrap" v-if="detailObj.maintainCheckTime">
											<div class="handle-btn-item" @click="(updateTime7 = true), (faultTime = '')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ updateTime7 ? $t('保存') : $t('common.Revise') }}</span>
											</div>
											<div class="handle-btn-item" @click="viewEditTimeRecord('I')">
												<Icon type="ios-create-outline" class="icon" />
												<span>{{ $t('修改记录') }}</span>
											</div>
										</div>
									</div>
									<DatePicker
										v-if="updateTime7"
										class="dateform"
										:options="optionsdate"
										v-model="faultTime"
										type="datetime"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeComplete('I', 'updateTime7')"
										@on-open-change="handleClose($event, 'updateTime7')"
									>
									</DatePicker>
								</Col>
							</Row>
						</Col>
						<Col span="8" style="border-bottom: 1px solid #eee">
							<Row>
								<!--是否影响生产-->
								<Col class="basic-info-body-label" span="24">{{ $t('fault.ImpactProduction') }}</Col>
								<Col class="basic-info-body-item" span="24">{{ detailObj.affectProductionFlagStr }} </Col>
							</Row>
						</Col>
					</Row>
				</div>
			</div>
		</Card>
		<Card :title="$t('fault.DeviceInformation')" class="detail-content-layout mt16">
			<div class="basic-info">
				<div class="basic-info-body">
					<Row style="border-top: 1px solid #eee; border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('equipCheck.EquipmentNo') }}</Col>
								<!--设备编号-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.deviceNo }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('equipCheck.EquipmentName') }}</Col>
								<!--设备名称-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.deviceName }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('equipCheck.SerialNo') }}</Col>
								<!--设备流水号-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.deviceMId }}</Col>
							</Row>
						</Col>
					</Row>
					<Row style="border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('设备等级') }}</Col>
								<!--设备类别-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.categoryName }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('common.company') }}</Col
								><!--公司-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.companyName }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.DeviceLocation') }}</Col>
								<!--设备位置-->
								<Col class="basic-info-body-item" span="24">{{ detailObj.functionalLocationName }}</Col>
							</Row>
						</Col>
					</Row>
					<Row style="border-top: 0px solid #eee; border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('设备类别') }}</Col>
								<Col class="basic-info-body-item" span="24">{{ detailObj.deviceType }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('equipCheck.Model') }}</Col>
								<Col class="basic-info-body-item" span="24">{{ detailObj.specification }}</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('equipCheck.AssetNo') }}</Col>
								<Col class="basic-info-body-item" span="24">{{ detailObj.assetsNo }}</Col>
							</Row>
						</Col>
					</Row>
				</div>
			</div>
		</Card>
		<Card
			title="故障判定记录"
			v-if="
				detailObj.workOrderStatus === 2 ||
				detailObj.workOrderStatus === 3 ||
				detailObj.workOrderStatus === 4 ||
				detailObj.workOrderStatus === 5 ||
				detailObj.workOrderStatus === 6 ||
				detailObj.workOrderStatus === 7 ||
				detailObj.workOrderStatus === 9 ||
				detailObj.workOrderStatus === 12
			"
			class="detail-content-layout mt16"
		>
			<div class="basic-info">
				<div class="basic-info-body" style="border-right: 1px solid #eee">
					<Row style="border-top: 1px solid #eee; border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">故障部位</Col
								><!--故障部位-->
								<Col class="basic-info-body-item" span="24">
									<Input v-if="detailObj.workOrderStatus === 5" v-model="params.faultPart" :placeholder="$t('请输入')" />

									<!-- <searchAndSelectComponent
										v-if="detailObj.workOrderStatus === 5"
										:list="faultPosition"
										:field="{ label: 'troubleUnit', value: 'troubleUnit' }"
										:remote-method="handleRemotePosition"
										@change="faultPositionChange"
									/> -->
									<div v-else>{{ detailObj.faultPart }}</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('fault.FaultClassification') }} </Col
								><!--故障分类-->
								<Col class="basic-info-body-item" span="24">
									<Select v-if="detailObj.workOrderStatus === 5" v-model="params.faultCategory" style="width: 100%">
										<Option v-for="item in faultList" :value="item.value" :key="item.id" :label="item.value"> </Option>
									</Select>
									<!-- <searchAndSelect
										v-model="params.faultCategory"
										v-if="detailObj.workOrderStatus === 5"
										type="faultCategory"
										ref="faultCategory"
										:getSearchParams="getSearchParams"
									/> -->
									<div v-else>{{ detailObj.faultCategory }}</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('fault.RepairingMode') }} </Col>
								<!--维修方式-->
								<Col class="basic-info-body-item" span="24" style="border-right: none">
									<Select v-if="detailObj.workOrderStatus === 5" v-model="params.maintainMode" style="width: 100%">
										<Option v-for="item in maintainTypeList" :value="item.value" :key="item.value" :label="item.label"> </Option>
									</Select>
									<div v-else>{{ params.maintainMode !== null ? maintainTypeList.find((item) => item.value == params.maintainMode).label : '' }}</div>
								</Col>
							</Row>
						</Col>
					</Row>
					<Row style="border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.RequiredTime') }} </Col
								><!--需求完工时间-->
								<Col class="basic-info-body-item" span="24">
									<DatePicker
										class="dateform"
										:value="params.needCompleteTime"
										@on-change="(val) => (this.params.needCompleteTime = val)"
										type="datetime"
										v-if="detailObj.workOrderStatus === 5"
										format="yyyy-MM-dd HH:mm:ss"
										:placeholder="`${$t('common.selectInfo')}`"
									>
									</DatePicker>
									<div v-else>{{ params.needCompleteTime }}</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('fault.CauseAnalysis') }} </Col>
								<!--故障原因分析-->
								<Col class="basic-info-body-item" span="24" style="border-right: none">
									<Input v-if="detailObj.workOrderStatus === 5 || analysisOfCausesEdit" v-model="params.faultReason" :placeholder="$t('请输入')" />

									<!-- <searchAndSelect v-if="detailObj.workOrderStatus === 5 || analysisOfCausesEdit" type="faultReason" ref="faultReason"
                               :style="{width: detailObj.workOrderStatus == 5 ? '100%':'300px',display:' inline-block'}"
                               v-model="params.faultReason" :getSearchParams="getSearchParams"/> -->
									<div v-else style="display: inline-block">
										<Tooltip max-width="500">
											<span class="over-wrapper" style="width: 200px; display: inline-block">{{ detailObj.faultReason }}</span>
											<span slot="content">{{ detailObj.faultReason }}</span>
										</Tooltip>
									</div>
									<!-- <div  class="handle-btn-wrap" v-if="[3,4,5,6,7,9,10].includes((detailObj.workOrderStatus/1))">
                <div class="handle-btn-item" @click="analysisOfCausesEditHandle">
                  <Icon type="ios-create-outline" class="icon" />
                  <span>{{ analysisOfCausesEdit ? $t('保存'):$t('common.Revise') }}</span>
                </div>
                <div class="handle-btn-item" @click="viewEditRecord('A')">
                  <Icon type="ios-create-outline" class="icon" />
                  <span>{{ $t('修改记录') }}</span>
                </div>
              </div> -->
								</Col>
							</Row>
						</Col>

						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('fault.Solution') }} </Col>
								<!--解决办法和预防措施-->
								<Col class="basic-info-body-item" span="24" style="border-right: none">
									<Input v-if="detailObj.workOrderStatus === 5 || solutionEdit" v-model="params.solution" :placeholder="$t('请输入')" />
									<!-- <searchAndSelect ref="solution" v-if="detailObj.workOrderStatus === 5 || solutionEdit" type="solution"
                               :style="{width: detailObj.workOrderStatus == 5 ? '100%':'300px',display:' inline-block'}"
                               v-model="params.solution" :getSearchParams="getSearchParams"/> -->
									<div v-else style="display: inline-block">
										<Tooltip max-width="500">
											<span class="over-wrapper" style="width: 200px; display: inline-block">{{ detailObj.solution }}</span>
											<span slot="content">{{ detailObj.solution }}</span>
										</Tooltip>
									</div>
									<div v-has="'solutionEditHandle'" class="handle-btn-wrap" v-if="[3, 4, 5, 6, 7, 9, 10].includes(detailObj.workOrderStatus / 1)">
										<div class="handle-btn-item" @click="solutionEditHandle">
											<Icon type="ios-create-outline" class="icon" />
											<span>{{ solutionEdit ? $t('保存') : $t('common.Revise') }}</span>
										</div>
										<div class="handle-btn-item" @click="viewEditRecord('B')">
											<Icon type="ios-create-outline" class="icon" />
											<span>{{ $t('修改记录') }}</span>
										</div>
									</div>
								</Col>
							</Row>
						</Col>
					</Row>
					<Row style="border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">设备有无损坏</Col>
								<Col class="basic-info-body-item" span="24">
									<RadioGroup v-if="detailObj.workOrderStatus == 5" v-model="params.ifBroken">
										<Radio v-for="item in damageList" :label="item.value" :key="item.value">
											<span>{{ item.label }}</span>
										</Radio>
									</RadioGroup>
									<span v-else>{{ getLabelFormValue(damageList, detailObj.ifBroken) }}</span>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('common.Assistrepairman') }}</Col>
								<Col class="basic-info-body-item" span="24">
									<Input
										v-if="detailObj.workOrderStatus === 5"
										@click.native="openPersonnelSelectionModal"
										readonly
										v-model="params.assistRepairer"
										:placeholder="$t('请选择')"
									/>
									<span v-else>{{ detailObj.assistRepairer }}</span>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('备注') }}</Col>
								<Col class="basic-info-body-item" span="24">
									<Input v-if="detailObj.workOrderStatus === 5" v-model="params.remark" :placeholder="$t('请输入')" />
									<span v-else>{{ detailObj.remark }}</span>
								</Col>
							</Row>
						</Col>
					</Row>
					<!-- <Row style="border-bottom: 1px solid #eee">
            <Col span="8" v-if="params.maintainMode===0">
            <Row>
              <Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('是否需要采购备件') }}
              </Col>
              <Col class="basic-info-body-item" span="24">
              <RadioGroup v-if="detailObj.workOrderStatus === 5" v-model="params.ifNeedBuyBackups" @on-change="ifNeedBuyBackupsChange">
                <Radio v-for="item in needPurchaseList" :label="item.value" :key="item.value">
                  <span>{{ item.label }}</span>
                </Radio>
              </RadioGroup>
              <span v-else>{{ getLabelFormValue(needPurchaseList, detailObj.ifNeedBuyBackups) }}</span>
              </Col>
            </Row>
            </Col>
          </Row> -->
				</div>
			</div>
		</Card>
		<!-- <sparePartsPurchasingRecords ref="sparePartsPurchasingRecords" v-if="params.ifNeedBuyBackups==1 &&  params.maintainMode =='0'" /> -->
		<Card
			title="委外记录"
			v-if="
				params.maintainMode === 2 &&
				(detailObj.workOrderStatus === 3 ||
					detailObj.workOrderStatus === 4 ||
					detailObj.workOrderStatus === 5 ||
					detailObj.workOrderStatus === 6 ||
					detailObj.workOrderStatus === 7 ||
					detailObj.workOrderStatus === 9)
			"
			class="detail-content-layout mt16"
		>
			<div class="basic-info">
				<div class="basic-info-body">
					<Row style="border-top: 1px solid #eee; border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.PurchaseOrderNo') }} </Col
								><!--采购单号-->
								<Col class="basic-info-body-item" span="24">
									<Input v-if="detailObj.workOrderStatus === 5" v-model="params.purchaseOrderNumber" :border="false" />
									<div v-else>{{ params.purchaseOrderNumber }}</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('preliminary.Vendor') }} </Col
								><!--供应商-->
								<Col class="basic-info-body-item" span="24">
									<Input v-if="detailObj.workOrderStatus === 5" v-model="params.suppliers" :border="false" />
									<div v-else>{{ params.suppliers }}</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('到位日期') }} </Col
								><!--到位日期-->
								<Col class="basic-info-body-item" span="24">
									<DatePicker
										v-if="detailObj.workOrderStatus === 5"
										class="dateform"
										@on-change="(val) => (this.params.arrivalDate = val)"
										:value="params.arrivalDate"
										type="datetime"
										format="yyyy-MM-dd"
										:placeholder="`${$t('common.selectInfo')}`"
										@on-ok="handleUpdateTimeOk('managerConfirmTime', 'updateTime1')"
										@on-open-change="handleClose($event, 'updateTime1')"
									>
									</DatePicker>
									<div v-else>{{ params.arrivalDate }}</div>
								</Col>
							</Row>
						</Col>
					</Row>
					<Row style="border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.Amount') }} </Col>
								<!--金额-->
								<Col class="basic-info-body-item" span="24">
									<Input v-if="detailObj.workOrderStatus === 5" v-model="params.outsourcedAmount" :border="false" />
									<div v-else>{{ params.outsourcedAmount }}</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.Document') }} </Col>
								<!--委外单据-->
								<Col class="basic-info-body-item" span="24" style="display: flex">
									<Upload :show-upload-list="false" v-if="detailObj.workOrderStatus === 5" :before-upload="handleBeforeUpload" type="drag" action="">
										<!-- 点击上传 -->
										<Button type="primary">{{ $t('common.Upload') }}</Button>
									</Upload>
									<div class="fileWrap">
										<span class="file-list" v-for="(item, index) in setFileList" :key="index">
											<Tag color="blue" type="border" class="item-src" @click.native="handlePreview(item)">
												{{ item.fileName }}
											</Tag>
											<Icon
												v-if="detailObj.workOrderStatus === 5"
												class="item-icon"
												type="ios-trash-outline"
												size="20"
												@click="delFileList($event, index, false)"
											>
											</Icon>
										</span>
									</div>
								</Col>
							</Row>
						</Col>
					</Row>
				</div>
			</div>
		</Card>
		<Card
			:title="`${$t('fault.MaintenanceSparePartsDetails')}`"
			v-if="detailObj.workOrderStatus === 5 || detailObj.workOrderStatus === 6 || detailObj.workOrderStatus === 7 || detailObj.workOrderStatus === 9"
			class="mt16 detail-content-layout"
		>
			<div class="basic-info">
				<div class="basic-info-title mb16">
					<Button
						v-if="detailObj.workOrderStatus === 5"
						type="primary"
						style="line-height: 32px"
						ghost
						shape="circle"
						icon="md-add"
						@click="handleAddDevice"
						>{{ $t('maintenance.Add') }} </Button
					><!--添加备件采购-->
				</div>
				<div class="basic-info-body">
					<Table :columns="makeColumns" :data="makeDataSource">
						<template slot-scope="{ row }" slot="action">
							<span class="icon" v-if="detailObj.workOrderStatus === 5" @click="editMaterial(row)">{{ $t('common.Edit') }}</span>
							<span class="icon" v-if="detailObj.workOrderStatus === 5" @click="deleteMaterial(row.id, row.useOutInfoId)">{{
								$t('common.Delete')
							}}</span>
							<!--删除-->
						</template>
					</Table>
				</div>
			</div>
		</Card>
		<Card
			title="完工信息"
			v-if="detailObj.workOrderStatus === 5 || detailObj.workOrderStatus === 6 || detailObj.workOrderStatus === 7 || detailObj.workOrderStatus === 9"
			class="detail-content-layout mt16"
		>
			<div class="basic-info">
				<div class="basic-info-body">
					<Row style="border-top: 1px solid #eee; border-bottom: 1px solid #eee">
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('fault.FaultType') }} </Col
								><!--故障类型-->
								<Col class="basic-info-body-item" span="24">
									<searchAndSelectComponent
										ref="faultTypeNameRef"
										v-if="detailObj.workOrderStatus === 5"
										:list="faultTypeNameList"
										:field="{ label: 'value', value: 'value' }"
										:remote-method="handleRemoteFaultTypeName"
										@change="faultTypeNameChange"
									/>
									<div v-else>{{ detailObj.faultTypeName }}</div>
								</Col>
							</Row>
						</Col>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24">{{ $t('common.UploadAttachment') }}</Col>
								<!--上传附件-->
								<Col class="basic-info-body-item" span="24" style="display: flex">
									<Upload :show-upload-list="false" v-if="detailObj.workOrderStatus === 5" :before-upload="handleBeforeUpload2" type="drag" action="">
										<!-- 点击上传 -->
										<Button type="primary">{{ $t('common.Upload') }}</Button>
									</Upload>
									<div class="fileWrap">
										<span class="file-list" v-for="(item, index) in endFileList" :key="index">
											<span class="item-src" @click="handlePreview(item)">{{ item.fileName }}</span>
											<Icon
												v-if="detailObj.workOrderStatus === 5"
												class="item-icon"
												type="ios-trash-outline"
												size="20"
												@click="delFileList($event, index, true)"
											>
											</Icon>
										</span>
									</div>
								</Col>
							</Row>
						</Col>
					</Row>
				</div>
			</div>
		</Card>
		<Card
			title="维修评分"
			v-if="detailObj.workOrderStatus === 6 || detailObj.workOrderStatus === 7 || detailObj.workOrderStatus === 9"
			class="detail-content-layout mt16"
		>
			<div class="basic-info">
				<div class="basic-info-body">
					<Row>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('fault.ServiceAttitude') }} </Col
								><!--服务态度-->
								<Col class="basic-info-body-item" span="24">
									<Rate :disabled="detailObj.workOrderStatus !== 6" v-model="detailObj.serviceAttitudeScore" />
								</Col>
							</Row>
						</Col>
					</Row>
					<Row>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('fault.TechnicalCompetence') }} </Col
								><!--技术能力-->
								<Col class="basic-info-body-item" span="24">
									<Rate :disabled="detailObj.workOrderStatus !== 6" v-model="detailObj.technicalSkillsScore" />
								</Col>
							</Row>
						</Col>
					</Row>
					<Row>
						<Col span="8">
							<Row>
								<Col class="basic-info-body-label" span="24"><span style="color: red">*</span>{{ $t('fault.ResponseSpeed') }} </Col
								><!--响应速度-->
								<Col class="basic-info-body-item" span="24">
									<Rate :disabled="detailObj.workOrderStatus !== 6" v-model="detailObj.responseSpeedScore" />
								</Col>
							</Row>
						</Col>
					</Row>
				</div>
			</div>
		</Card>
		<Card
			:title="`${$t('维修结果')}`"
			v-if="detailObj.workOrderStatus === 6 || detailObj.workOrderStatus === 7 || detailObj.workOrderStatus === 9"
			class="detail-content-layout mt16"
		>
			<div v-if="detailObj.workOrderStatus == 7 || detailObj.workOrderStatus == 9">
				<p v-if="detailObj.repairResult == 1">{{ $t('维修完成，设备正常') }}</p>
				<p v-if="detailObj.repairResult == 3">{{ $t('维修正常，有待观察') }}{{ detailObj.observeDays }}&nbsp;{{ $t('天') }}</p>
				<p v-if="detailObj.repairResult == 2">{{ $t('维修不合格，原因是') }}{{ detailObj.unqualifiedReason }}</p>
			</div>
			<div v-else>
				<RadioGroup v-model="detailObj.repairResult">
					<Radio label="1">
						<span>{{ $t('维修完成，设备正常') }}</span>
					</Radio>
					<Radio label="3">
						<span>{{ $t('维修正常，有待观察') }}</span>
						<div style="display: inline-block">
							<Input v-model="detailObj.observeDays" />
						</div>
						<span>&nbsp;{{ $t('天') }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
					</Radio>
					<Radio label="2">
						<span>{{ $t('维修不合格，原因是') }}&nbsp;</span>
						<div style="display: inline-block">
							<Input v-model="detailObj.unqualifiedReason" />
						</div>
					</Radio>
				</RadioGroup>
			</div>
		</Card>
		<Card :title="`${$t('fault.TransferOrderRecord')}`" class="detail-content-layout mt16" v-if="Array.isArray(recordData) && recordData.length > 0">
			<div class="tableContent">
				<Table :columns="recordColumns" :data="recordData" />
			</div>
		</Card>
		<Card :title="`${$t('升级记录')}`" class="detail-content-layout mt16" v-if="Array.isArray(upgradeRecordList) && upgradeRecordList.length > 0">
			<div class="tableContent">
				<Table :columns="upgradeRecordColumns" :data="upgradeRecordList" />
			</div>
		</Card>
		<Card :title="`${$t('驳回记录')}`" class="detail-content-layout mt16" v-if="Array.isArray(rejectList) && rejectList.length > 0">
			<div class="tableContent">
				<Table :columns="rejectColumns" :data="rejectList" />
			</div>
		</Card>
		<add-material ref="addMaterial" @refresh="getDetailInfo(detailObj.id, true)" />
		<template v-if="detailObj.attachmentDTOs1 && detailObj.attachmentDTOs1.length">
			<gallery :images="galleryImages" :index="galleryIndex" @close="galleryIndex = null"></gallery>
		</template>
		<bottom-handle-wrap>
			<Button @click="backPage">{{ $t('common.Cancel') }}</Button>
			<!-- <template v-if="showConfirmBtn && detailObj.workOrderStatus === 2">
        <Button type="primary" @click="maintainConfirmBtn">{{ $t('fault.FailureConfirming') }}
        </Button>
      </template> -->
			<!-- <template v-if="showOutBtn && detailObj.workOrderStatus === 3">
        <Button type="primary" @click="maintainOutConfirmRejectBtn">驳回
        </Button>
        <Button type="primary" @click="maintainOutConfirmBtn">委外确认
        </Button>
      </template> -->
			<template v-if="showStartBtn">
				<Button type="primary" @click="startManitain">{{ $t('fault.StartMaintenance') }} </Button
				><!--开始维修-->
			</template>
			<template v-if="showEndBtn">
				<Button type="primary" @click="endManitain">{{ $t('fault.Completion') }} </Button
				><!--完工-->
			</template>
			<template v-if="showcheckBtn">
				<Button type="primary" @click="checkManitain">{{ $t('fault.acceptance') }} </Button
				><!--验收-->
			</template>
			<template v-if="detailObj.workOrderStatus == 9">
				<Button type="primary" @click="toReview"> {{ $t('复核') }} </Button
				><!--复核-->
			</template>

			<template v-if="detailObj.workOrderStatus == 12">
				<Button v-has="'workReplay'" type="primary" @click="toCounteroffer">
					{{ $t('复盘') }}
				</Button>
			</template>
			<!-- 待维修驳回-->
			<template v-if="detailObj.workOrderStatus == 4">
				<Button type="primary" class="black" ghost @click="handleRepairOutsourcingReject()">
					{{ $t('fault.Reject') }}
				</Button>
			</template>
			<!--  维修驳回-->
			<template v-if="detailObj.workOrderStatus == 5">
				<Button type="primary" class="black" ghost @click="handleRepairOutsourcingReject()">
					{{ $t('fault.Reject') }}
				</Button>
			</template>
		</bottom-handle-wrap>

		<personnel-selection-modal ref="personnelSelectionModal" :title="$t('请选择') + $t('人员')" :checkbox="true" @handleOk="selectPersonnel">
		</personnel-selection-modal>

		<!--驳回提醒-->
		<Modal :mask-closable="false" v-model="backFaultCodeShowF" class="modal-title-layout" :title="`${$t('fault.ConfiRejected')}`">
			<div class="icon red" style="margin: 23px auto 16px !important">
				<i class="iconfont zy-common-shibai1"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.Pleasereject') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="backFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="backLoading" @click="handleConfirmOk(-1)">{{ $t('maintenance.Confirmed') }} </Button>
			</div>
		</Modal>

		<!--驳回提醒-->
		<Modal :mask-closable="false" width="800px" v-model="handleEditRecordStatus" class="modal-title-layout" :title="`${$t('修改记录')}`">
			<Table ellipsis ref="selection" height="500" :columns="editRecordColumnList" :data="editRecordList"> </Table>
			<div slot="footer">
				<Button type="primary" @click="handleEditRecordStatus = false">{{ $t('确认') }}</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
import VueGallery from 'vue-gallery';
import addMaterial from './modules/addMaterial.vue';
import searchAndSelect from './modules/searchAndSelect.vue';
import searchAndSelectComponent from '@/components/searchAndSelect.vue';
// import sparePartsPurchasingRecords from '@/views/fault/workOrderHall/modules/sparePartsPurchasingRecords'
import PersonnelSelectionModal from '@/components/PersonnelSelectionModal.vue';
import moment from 'moment';

export default {
	name: 'orderDetailModal',
	components: {
		addMaterial,
		gallery: VueGallery,
		searchAndSelect,
		searchAndSelectComponent,
		// sparePartsPurchasingRecords,
		PersonnelSelectionModal,
	},
	data() {
		return {
			faultLevelList: ['A', 'B', 'C'],
			updateTime10: false,
			updateTime9: false,
			editRecordList: [],
			editRecordColumn: [
				{
					key: 'columnValueBefore',
					title: this.$t('修改前'),
					align: 'center',
				},
				{
					key: 'columnValueAfter',
					title: this.$t('修改后'),
					align: 'center',
				},
				{
					key: 'createBy',
					title: this.$t('修改人'),
					align: 'center',
				},
				{
					key: 'createTime',
					title: this.$t('修改时间'),
					align: 'center',
				},
			],
			handleEditRecordStatus: false,
			analysisOfCausesEdit: false,
			backFaultCodeShowF: false,
			damageList: [
				{
					label: '有',
					value: 2,
				},
				{
					label: '无',
					value: 1,
				},
			],
			needPurchaseList: [
				{
					label: '是',
					value: '1',
				},
				{
					label: '否',
					value: '2',
				},
			],
			upgradeRecordList: [],
			upgradeRecordColumns: [
				{
					title: `${this.$t('升级等级')}`,
					key: 'upgradeLevel',
					align: 'center',
					minWidth: 120,
					render: (h, params) => {
						return h('div', [h('span', {}, ['一', '二', '三', '四', '五'][params.row.upgradeLevel - 1] + '级')]);
					},
				},
				{
					title: `${this.$t('状态')}`,
					key: 'maintenancestatus',
					align: 'center',
					minWidth: 120,
					render: (h, params) => {
						return h('div', [
							h('span', {}, params.row.maintenanceStatus == '1' ? '待分配' : params.row.maintenancestatus == '5' ? '维修中' : '升级中'),
						]);
					},
				},
				{
					title: `${this.$t('升级内容')}`,
					key: 'upgradeDescription',
					align: 'center',
					minWidth: 120,
				},
				{
					title: `${this.$t('升级时间')}`,
					key: 'upgradeTime',
					align: 'center',
					minWidth: 120,
				},
				{
					title: `${this.$t('升级人员')}`,
					key: 'repairedByName',
					align: 'center',
					tooltip: true,
					render: (h, params) => {
						return h('div', [h('span', {}, JSON.parse(params.row.repairedByName).join(','))]);
					},
				},
			],
			faultPosition: [],
			galleryIndex: null,
			galleryImages: [],
			optionsdate: {
				disabledDate(date) {
					return date && date.getTime() > Date.now();
				},
			},
			updateTime1: false,
			updateTime2: false,
			updateTime3: false,
			updateTime4: false,
			updateTime5: false,
			updateTime6: false,
			updateTime7: false,
			faultTime: '',
			faultList: [],
			showConfirmBtn: false,
			showStartBtn: false,
			showEndBtn: false,
			showOutBtn: false,
			showcheckBtn: false,
			// 非委外参数
			params: {
				faultAnalyse: '',
			},
			setFileList: [],
			statusText: '',
			orderDetailVisible: false,
			detailObj: {},
			mainTypeList: [{ value: '发动机', label: '发动机' }],
			maintainTypeList: [
				{ value: 0, label: this.$t('自行维修') },
				{ value: 1, label: this.$t('保修期内维修') },
				{
					value: 2,
					label: this.$t('委外维修'),
				},
			],
			makeColumns: [
				{
					title: `${this.$t('fault.SparePart')}`,
					key: 'materialCode',
					align: 'center',
					minWidth: 120,
				},
				// {
				//     title: `${this.$t('common.SpareNumber')}`,
				//     key: 'backupNo',
				//     align: 'center',
				//     minWidth: 120
				// },
				{
					title: `${this.$t('fault.SparePartsName')}`,
					key: 'materialName',
					align: 'center',
					minWidth: 120,
				},
				{
					title: `${this.$t('库存数量')}`,
					key: 'inventoryQuantity',
					align: 'center',
					minWidth: 120,
				},
				{
					title: `${this.$t('fault.SparePartsSpecification')}`,
					key: 'materialModel',
					align: 'center',
					minWidth: 180,
				},
				{
					title: `${this.$t('spareParts.usageAmount')}`,
					key: 'usedQuantity',
					align: 'center',
					minWidth: 120,
				},
				// {
				//     title: `${this.$t('maintenance.Unitprice')}`,
				//     key: 'materialPrice',
				//     align: 'center',
				//     minWidth: 200
				// },
				// {
				//     title: `${this.$t('maintenance.totalprice')}`,
				//     key: 'materialPriceCount',
				//     align: 'center',
				//     minWidth: 200
				// },
				{
					title: this.$t('处理方式及结果'),
					key: 'handlingMethod',
					align: 'center',
					minWidth: 180,
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					align: 'center',
					minWidth: 200,
				},
			],
			makeDataSource: [],
			upgradeList: [],
			faultTypeList: [],
			endFileList: [],
			targetYpe: '',
			specificationList: [],
			analysisOfCausesList: [],
			solutionList: [],
			recordColumns: [
				{
					title: this.$t('转单时间'),
					key: 'createTime',
					align: 'center',
				},
				{
					title: this.$t(`转单人`),
					key: 'distributionByStr',
					align: 'center',
				},
				{
					title: this.$t(`转单前`),
					key: 'distributionFromStr',
					align: 'center',
				},
				{
					title: this.$t(`转单后`),
					key: 'distributionToStr',
					align: 'center',
				},
				{
					title: this.$t(`转单状态`),
					key: 'workOrderStatusStr',
					align: 'center',
				},
			],
			recordTimeColumn: [
				{
					title: this.$t('修改前'),
					key: 'valueBefore',
					align: 'center',
				},
				{
					title: this.$t(`修改后`),
					key: 'value',
					align: 'center',
				},
				{
					title: this.$t(`修改人`),
					key: 'createByStr',
					align: 'center',
				},
				{
					title: this.$t(`修改时间`),
					key: 'createTime',
					align: 'center',
				},
			],
			recordData: [],
			faultTypeNameList: [],
			isRepairReject: false,
			solutionEdit: false,
			faultAnalyseList: [
				{ id: 1, name: this.$t('8D分析') },
				{ id: 2, name: this.$t('5W分析') },
			],
			faultAnalyseDisable: false,
			reanalyzeObj: {
				whyList: [{ analyse: '' }, { analyse: '' }, { analyse: '' }, { analyse: '' }, { analyse: '' }],
			},
			userType: '',
			rejectColumns: [
				{
					title: this.$t('驳回状态'),
					key: 'rejectStatusStr',
					align: 'center',
				},
				{
					title: this.$t('驳回人'),
					key: 'rejectUserName',
					align: 'center',
				},
				{
					title: this.$t('驳回时间'),
					key: 'rejectTime',
					align: 'center',
				},
				{
					title: this.$t('备注'),
					key: 'rejectRemark',
					align: 'center',
				},
			],
			rejectList: [],
		};
	},
	computed: {
		upgradeClass() {
			// console.log(this.params.upgradeReason,);
			const info = this.upgradeList.filter((v) => v.upgradeReason === this.params.upgradeReason)[0];
			// console.log(info);/
			return info ? info.grade : '';
		},
		upgradeRole() {
			const info = this.upgradeList.filter((v) => v.upgradeReason === this.params.upgradeReason)[0];
			return info ? [info.upgradeRole, info.roleId] : ['', null];
		},
	},
	created() {
		this.show(this.$route.query.id, this.$route.query.status);
		// this.getupgradeList()
		this.getFaultType();
		this.getDistributionRecord();
		this.getUpgradeRecordList();
	},
	methods: {
		delwhyObj(item, index) {
			if (this.reanalyzeObj.whyList.length <= 5) {
				this.$Message.warning({ content: this.$t('最少填写五条'), duration: 6, closable: true });
				return;
			}
			this.reanalyzeObj.whyList.splice(index, 1);
		},
		addwhyObj(item) {
			const query = { analyse: '' };
			this.reanalyzeObj.whyList.push(query);
		},
		getFaultAnalyse(item) {
			if (item === 'A') {
				this.faultAnalyseDisable = true;
				this.reanalyzeObj.faultAnalyse = 1;
			} else if (item === 'B') {
				this.faultAnalyseDisable = false;
				delete this.reanalyzeObj.faultAnalyse;
			} else {
				this.faultAnalyseDisable = true;
				delete this.reanalyzeObj.faultAnalyse;
			}
		},
		viewEditTimeRecord(key) {
			this.editRecordList = [];
			//editRecordList
			this.axios({
				method: 'post',
				url: '/dms/statistical/getWorkOrderTimesHistory',
				data: { key, id: this.detailObj.id },
			}).then((res) => {
				if (res.code === 200) {
					this.editRecordColumnList = this.recordTimeColumn;
					this.editRecordList = res.data;
					this.handleEditRecordStatus = true;
					// this.getDetailInfo()
					// this.$Message.success(({content: res.msg, duration: 6, closable: true}))
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		viewEditRecord(field) {
			this.editRecordList = [];
			//editRecordList
			this.axios({
				method: 'post',
				url: '/dms/workOrder/getFaultVerificationHistory',
				data: { field, id: this.detailObj.maintainJudgeRecordVO.id },
			}).then((res) => {
				if (res.code === 200) {
					this.editRecordColumnList = this.editRecordColumn;
					this.editRecordList = res.data;
					this.handleEditRecordStatus = true;
					// this.getDetailInfo()
					// this.$Message.success(({content: res.msg, duration: 6, closable: true}))
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		analysisOfCausesEditHandle() {
			this.analysisOfCausesEdit = !this.analysisOfCausesEdit;
			if (!this.analysisOfCausesEdit) {
				this.updateFaultVerification({ faultReason: this.$refs.faultReason.keyword });
			}
			this.$nextTick(() => {
				if (this.analysisOfCausesEdit) {
					this.params.faultReason = this.detailObj.faultReason;
					this.$refs.faultReason.keyword = this.detailObj.faultReason;
				}
			});
		},
		solutionEditHandle() {
			this.solutionEdit = !this.solutionEdit;
			if (!this.solutionEdit) {
				this.updateFaultVerification({ solution: this.$refs.solution.keyword });
			}
			this.$nextTick(() => {
				if (this.solutionEdit) {
					this.params.solution = this.detailObj.solution;
					this.$refs.solution.keyword = this.detailObj.solution;
				}
			});
		},
		updateFaultVerification(params) {
			this.axios({
				method: 'post',
				url: '/dms/workOrder/updateFaultVerification',
				data: { ...params, dmsMaintainId: this.$route.query.id },
			}).then((res) => {
				if (res.code === 200) {
					this.getDetailInfo();
					this.$Message.success({ content: res.msg, duration: 6, closable: true });
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		openPersonnelSelectionModal(item) {
			this.userType = item;
			this.$refs['personnelSelectionModal'].open();
		},
		selectPersonnel(users) {
			let assisters = [];
			let userIds = [];
			users.forEach((item) => {
				assisters.push(item.empno + '-' + item.realname);
				userIds.push(item.id);
			});
			if (this.userType === 1) {
				this.reanalyzeObj.principalStr = assisters.join(';');
				this.reanalyzeObj.principal = userIds;
			} else if (this.userType === 2) {
				this.reanalyzeObj.participantStr = assisters.join(';');
				this.reanalyzeObj.participant = userIds;
			} else {
				this.params.assistRepairer = assisters.join(';');
				this.params.userIds = userIds;
			}
			this.$forceUpdate();
			this.$refs['personnelSelectionModal'].close();
		},
		getLabelFormValue(list, value) {
			if (!value || !(Array.isArray(list) && list.length > 0)) return '';
			const obj = list.find((item) => item.value == value);
			return obj.label;
		},
		ifNeedBuyBackupsChange(val) {
			this.params.ifNeedBuyBackups = val;
			this.$forceUpdate();
		},
		backPage() {
			sessionStorage.setItem('workOrderHallStatus', this.$route.query.status);
			this.$router.go(-1);
		},
		getUpgradeRecordList() {
			this.axios({
				method: 'get',
				url: '/dms/deviceMaintenanceWorkOrder/upgrade_record',
				params: {
					workOrderId: this.$route.query.id,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.upgradeRecordList = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		getDistributionRecord() {
			this.axios({
				method: 'get',
				url: '/dms/deviceMaintenanceWorkOrder/distributionRecord',
				params: {
					workOrderId: this.$route.query.id,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.recordData = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		// solutionChange({ value, value1 }) {
		//   this.params.solution = value
		//   if (value1) {
		//     this.params.faultReason = value1
		//     this.$refs.faultReason.keyword = value1
		//   }
		// },
		// analysisOfCausesChange({ value, value1 }) {
		//   this.params.faultReason = value
		//   if (value1) {
		//     this.params.solution = value1
		//     this.$refs.solution.keyword = value1
		//   }
		// },
		// faultCategoryChange({ value, value1 }) {
		//   this.params.faultCategory = value
		//   if(value1){
		//     this.params.faultCategory= value1;
		//     this.$refs.faultCategory.keyword = value1
		//   }
		// },
		getSearchParams() {
			// const obj = this.faultList.find(item => item.id === this.params.faultCategory)
			return {
				deviceId: this.detailObj.deviceId,
				// deviceType: this.detailObj.deviceType,
				// materialModel: this.detailObj.materialModel,
				// troubleUnitId: this.params.troubleUnitId,
				// faultCategory: obj ? obj.value : ''
			};
		},
		// specificationParamsChange(val){
		//   this.params.troubleUnitId = ''
		//   this.faultPosition = []
		//   if (val){
		//     this.getFaultPosition({deviceMId:this.detailObj.deviceMId})
		//   }
		// },
		// getSpecification(params) {
		//   this.axios({
		//     method: 'get',
		//     url: '/dms/dmsDeviceTz/getSpecification',
		//     params
		//   }).then(res => {
		//     if (res.code === 200) {
		//         this.specificationList = res.data
		//     } else {
		//       this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
		//     }
		//   })
		// },
		faultPositionChange({ label, value }) {
			// this.params.troubleUnitId = value
			// this.params.troubleUnitName = label
			this.params.faultPart = label;
		},
		handleRemotePosition(query) {
			this.axios({
				method: 'get',
				url: '/dms/devMaintainKb/selectTroubleUnitByDeviceId',
				params: {
					deviceId: this.detailObj.deviceId,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.faultPosition = res.data.map((item) => {
						item.desc = item.value;
						return item;
					});
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		previewClicjk(item, index) {
			this.galleryIndex = index;
			let arr = this.detailObj.attachmentDTOs1;
			this.galleryImages = arr.map((val) => {
				if (val.filePath.includes('video')) {
					val.filetype = 'video/mp4';
				}
				if (val.filePath.includes('jpg')) {
					val.filetype = 'image/jpeg';
				}
				let params = {
					type: val.filetype,
					href: this.util.filePathToUrl(val.filePath),
				};

				return params;
			});
		},
		// 弹窗展示
		show(id, type) {
			this.orderDetailVisible = true;
			this.showStartBtn = false;
			this.showConfirmBtn = false;
			this.showEndBtn = false;
			this.showOutBtn = false;
			this.showcheckBtn = false;
			this.getDetailInfo(id);
		},
		// 弹窗关闭
		handleModalClose(val) {
			if (!val) {
				this.$emit('handleRefresh');
			}
		},
		handleClose(val, type) {
			if (!val) {
				this[type] = false;
			}
		},
		// 时间修改
		handleUpdateTimeComplete(type, visibleType) {
			if (this.faultTime) {
				this.axios({
					method: 'post',
					// url: '/dms/workOrder/updaTetagTimes',
					url: '/dms/statistical/updateWorkOrderTimes',
					data: {
						value: this.$moment(this.faultTime).format('YYYY-MM-DD HH:mm:ss'),
						id: this.detailObj.id,
						key: type,
					},
				}).then(() => {
					this[visibleType] = false;
					this.getDetailInfo();
				});
			}
		},
		// 时间修改
		handleUpdateTimeOk(type, visibleType) {
			if (this.faultTime) {
				this.axios({
					method: 'post',
					url: '/dms/workOrder/updaTetagTimes',
					// url:"/dms/statistical/updateWorkOrderTimes",
					data: {
						[type]: this.$moment(this.faultTime).format('YYYY-MM-DD HH:mm:ss'),
						id: this.detailObj.id,
					},
				}).then(() => {
					this[visibleType] = false;
					this.getDetailInfo();
				});
			}
		},
		//获取故障数据
		getDetailInfo(id = this.detailObj.id, status) {
			this.axios({
				method: 'get',
				url: '/dms/deviceMaintenanceWorkOrder/workOrderInfo',
				params: { workOrderId: id },
			}).then((res) => {
				if (res.code === 200) {
					const { workOrderStatus, workOrderRejectLogVOS, faultTypeName } = res.data;
					this.rejectList = workOrderRejectLogVOS.map((item) => {
						item.rejectUserName = item.rejectUserName + '-' + item.rejectUserNo;
						return item;
					});
					this.faultTypeNameList = [
						{
							name: '故障类型',
							value: faultTypeName,
							enValue: faultTypeName,
						},
					];

					if (workOrderStatus / 1 === 2) {
						this.showConfirmBtn = true;
					}
					if (workOrderStatus / 1 === 3) {
						this.showOutBtn = true;
					}
					if (workOrderStatus / 1 === 4) {
						this.showStartBtn = true;
					}
					if (workOrderStatus / 1 === 5) {
						this.showEndBtn = true;
					}
					if (workOrderStatus / 1 === 6) {
						this.showcheckBtn = true;
					}
					this.targetYpe = workOrderStatus;
					if (res.data.participant && res.data.participant.length > 0) {
						res.data.participantStr = res.data.participant
							.map((item) => {
								return item.empno + '-' + item.realName;
							})
							.join(';');
					}
					if (res.data.principal && res.data.principal.length > 0) {
						res.data.principalStr = res.data.principal
							.map((item) => {
								return item.empno + '-' + item.realName;
							})
							.join(';');
					}
					if (res.data.faultAnalyse) {
						res.data.faultAnalyseStr = this.faultAnalyseList.find((item) => item.id == res.data.faultAnalyse).name;
					}
					if (res.data.workOrderStatus == 12) {
						this.reanalyzeObj.correctiveAction = res.data.solution;
						this.reanalyzeObj.permanentPreventAction = res.data.solution;
						this.reanalyzeObj.rootCause = res.data.faultReason;
						this.reanalyzeObj.problemDescription = res.data.faultMessage;
					}
					this.detailObj = res.data;
					// this.detailObj.faultTypeName = this.detailObj.faultTypeName ? this.detailObj.faultTypeName : res.data.faultReason
					if (!status) {
						this.params = {
							faultPart: this.detailObj.faultPart,
							faultCategory: this.detailObj.faultCategory,
							maintainMode: this.detailObj.maintainMode,
							needCompleteTime: this.detailObj.needCompleteTime,
							faultReason: this.detailObj.faultReason,
							solution: this.detailObj.solution,
							ifBroken: this.detailObj.ifBroken,
							assistRepairer: this.detailObj.assistRepairer,
							remark: this.detailObj.remark,
							purchaseOrderNumber: this.detailObj.purchaseOrderNumber,
							suppliers: this.detailObj.suppliers,
							arrivalDate: this.detailObj.arrivalDate,
							outsourcedAmount: this.detailObj.outsourcedAmount,
						};
						this.setFileList = res.data.attachmentDTOs2;
						this.endFileList = res.data.attachmentDTOs3;
					}
					this.makeDataSource = res.data.maintainWorkOrderMaterials || [];

					if (!this.params.arrivalDate) {
						this.$set(this.params, 'arrivalDate', moment().format('YYYY-MM-DD'));
					}
					if (workOrderStatus == 9) {
						this.detailObj.reviewTime = new Date();
					}

					if (!this.params.ifBroken) {
						this.$set(this.params, 'ifBroken', '1');
					}
					if (!this.params.ifNeedBuyBackups) {
						this.$set(this.params, 'ifNeedBuyBackups', '2');
					}

					// this.getSpecification({deviceType})
					// console.log(23)
					//   this.getFaultPosition({deviceMId})
					this.handleRemotePosition();

					this.$nextTick(() => {
						if (this.detailObj.workOrderStatus !== 2 && Array.isArray(this.detailObj.backupPurchases) && this.detailObj.backupPurchases.length > 0) {
							this.$refs.sparePartsPurchasingRecords.setData(this.detailObj.backupPurchases);
						}

						this.$refs.faultTypeNameRef.keyword = faultTypeName;
					});

					let assisters = [];
					if (this.detailObj.assisterList && this.detailObj.assisterList.length > 0) {
						this.detailObj.assisterList.forEach((item) => {
							if (item != null) assisters.push(item.empno + '-' + item.realName);
						});

						this.detailObj.assistRepairer = assisters.join(';');
					}
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		//获取故障数据
		getFaultType() {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/dictList',
				params: { name: '故障分类' },
			}).then((res) => {
				if (res.code === 200) {
					this.faultList = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		handleRemoteFaultTypeName(val) {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/basicDict',
				params: { name: '故障类型' },
			}).then((res) => {
				if (res.code === 200) {
					this.faultTypeNameList = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});

			//
		},
		faultTypeNameChange(val) {
			this.detailObj.faultTypeName = val.label;
			this.detailObj.faultTypeId = val.id;
		},
		//获取升级数据
		getupgradeList() {
			this.axios({
				method: 'post',
				url: '/dms/upgrade/selectUpgrade',
				data: { upgradeType: '1' },
			}).then((res) => {
				if (res.code === 200) {
					this.upgradeList = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		//获取故障类型数据
		getFaultTypeList() {
			this.axios({
				method: 'post',
				url: '/dms/devMaintainKb/getDevMaintainKbList',
				data: {
					typeCode: '',
					typeName: '',
					pageSize: 50,
					pageNum: 1,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.faultTypeList = res.data.records;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},

		// 委外确认-驳回
		handleConfirmOk() {
			let ajaxParams = {};
			if (this.isRepairReject) {
				ajaxParams = {
					url: '/dms/deviceMaintenanceWorkOrder/reject',
					data: { id: this.detailObj.id },
					method: 'post',
				};
			} else {
				ajaxParams = {
					url: '/dms/workOrder/outsourcingToConfirm',
					data: { dmsMaintainId: this.detailObj.id, reject: true },
					method: 'post',
				};
			}

			this.axios({
				...ajaxParams,
			})
				.then((res) => {
					if (res.code === 200) {
						this.$Message.success({ content: res.msg, duration: 6, closable: true });
						if (this.isRepairReject) {
							this.showStartBtn = false;
							this.isRepairReject = false;
							this.showEndBtn = false;
						}
						this.getDetailInfo();
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				})
				.finally(() => {
					this.backFaultCodeShowF = false;
				});
		},
		maintainOutConfirmRejectBtn() {
			this.backFaultCodeShowF = true;
		},
		handleRepairOutsourcingReject() {
			this.backFaultCodeShowF = true;
			this.isRepairReject = true;
		},
		// 委外确认
		// maintainOutConfirmBtn() {

		//   if (!this.params.purchaseOrderNumber) {
		//     this.$Message.warning({ content: this.$t('请输入采购单号'), duration: 2, closable: true })
		//     return
		//   }
		//   if (!this.params.suppliers) {
		//     this.$Message.warning({ content: this.$t('请输入供应商'), duration: 2, closable: true })
		//     return
		//   }
		//   if (!this.params.arrivalDate) {
		//     this.$Message.warning({ content: this.$t('请选择') + this.$t('到位日期'), duration: 2, closable: true })
		//     return
		//   }

		//   let params = {
		//     dmsMaintainId: this.detailObj.id,
		//     reject: false,
		//     purchaseOrderNumber: this.params.purchaseOrderNumber,
		//     suppliers: this.params.suppliers,
		//     outsourcedAmount: this.params.outsourcedAmount,
		//     arrivalDate: moment(this.params.arrivalDate).format('YYYY-MM-DD'),
		//     attachmentDTOs: this.setFileList.map(v => ({
		//       attachmentType: 2,
		//       ...v
		//     }))
		//   }
		//   this.axios({
		//     method: 'post',
		//     url: '/dms/workOrder/outsourcingToConfirm',
		//     data: params
		//   }).then(res => {
		//     if (res.code === 200) {
		//       this.$Message.success({ content: res.msg, duration: 6, closable: true })
		//       this.showOutBtn = false
		//       this.showStartBtn = true
		//       this.getDetailInfo()
		//     } else {
		//       this.$Message.warning({ content: res.msg, duration: 6, closable: true })
		//     }
		//   })
		// },
		//文件上传
		handleBeforeUpload(file) {
			let formData = new FormData();
			formData.append('dir', 'device');
			formData.append('file', file);
			let config = {
				headers: {
					'Content-Type': 'multipart/form-data',
				},
			};
			this.axios({
				method: 'post',
				url: '/fileServer/upload',
				data: formData,
				config,
			}).then((res) => {
				if (res.code == 200) {
					this.setFileList.push({
						fileName: res.data.fileName,
						filePath: res.data.filepath,
						fileUrl: res.data.fileUrl,
					});
				}
			});
			return false;
		},
		//完工信息文件删除
		delFileList(e, i, end = false) {
			e.stopPropagation();
			if (end) {
				this.endFileList.splice(i, 1);
				return;
			}
			this.setFileList.splice(i, 1);
		},
		handlePreview(item) {
			if (item.filePath) {
				window.open(this.util.filePathToUrl(item.filePath));
			}
		},
		// 开始维修
		startManitain() {
			this.axios({
				method: 'get',
				url: '/dms/workOrder/beginToRepair',
				params: { workOrderId: this.detailObj.id },
			}).then((res) => {
				if (res.code === 200) {
					this.showStartBtn = false;
					this.showEndBtn = true;
					this.getDetailInfo();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		// 添加备件
		handleAddDevice() {
			this.$refs.addMaterial.show(this.detailObj.id, null, this.detailObj.deviceMId, this.detailObj.orgId, this.detailObj);
		},
		// 编辑备件
		editMaterial(row) {
			this.$refs.addMaterial.show(this.detailObj.id, row, this.detailObj.deviceMId, this.detailObj.orgId);
		},
		// 删除备件
		deleteMaterial(maintainBackupId, useOutInfoId) {
			this.axios({
				method: 'delete',
				url: '/dms/deviceMaintenanceWorkOrder/deleteMaintainBackupTemporary',
				params: { id: maintainBackupId },
			}).then((res) => {
				if (res.code === 200) {
					this.$Message.success(res.msg);
					this.getDetailInfo();
				} else {
					this.$Message.error(res.msg);
				}
			});
		},
		//文件上传
		handleBeforeUpload2(file) {
			let formData = new FormData();
			formData.append('dir', 'device');
			formData.append('file', file);
			let config = {
				headers: {
					'Content-Type': 'multipart/form-data',
				},
			};
			this.axios({
				method: 'post',
				url: '/fileServer/upload',
				data: formData,
				config,
			}).then((res) => {
				if (res.code == 200) {
					this.endFileList.push({
						fileName: res.data.fileName,
						filePath: res.data.filepath,
						fileUrl: res.data.fileUrl,
					});
				}
			});
			return false;
		},
		// 完工
		endManitain() {
			if (!this.params.faultCategory) {
				this.$Message.warning({ content: this.$t('请选择故障分类'), duration: 2, closable: true });
				return;
			}
			if (this.params.maintainMode == null) {
				this.$Message.warning({ content: this.$t('请选择维修方式'), duration: 2, closable: true });
				return;
			}
			if (!this.params.faultReason) {
				this.$Message.warning({ content: this.$t('请选择原因分析'), duration: 2, closable: true });
				return;
			}
			if (!this.params.solution) {
				this.$Message.warning({ content: this.$t('请选择解决办法和预防措施简述'), duration: 2, closable: true });
				return;
			}
			const params = {
				dmsMaintainId: this.detailObj.id,
				// deviceUniqueId: this.detailObj.deviceId,
				// faultTypeCode: this.detailObj.faultTypeCode,
				// faultTypeId: this.detailObj.faultTypeId,
				...this.params,
				workOrderNo: this.detailObj.workOrderNo,
				faultTypeName: this.detailObj.faultTypeName,
				attachmentDTOs2: this.setFileList,
				attachmentDTOs3: this.endFileList,
			};
			this.axios({
				method: 'post',
				url: '/dms/deviceMaintenanceWorkOrder/completion',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.showEndBtn = false;
					//this.showcheckBtn = true
					this.getDetailInfo();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		// 验收
		checkManitain() {
			if (!this.detailObj.serviceAttitudeScore) {
				this.$Message.warning({ content: this.$t('服务态度评分不能为空'), duration: 6, closable: true });
				return;
			}
			if (!this.detailObj.technicalSkillsScore) {
				this.$Message.warning({ content: this.$t('技术能力评分不能为空'), duration: 6, closable: true });
				return;
			}
			if (!this.detailObj.responseSpeedScore) {
				this.$Message.warning({ content: this.$t('响应速度评分不能为空'), duration: 6, closable: true });
				return;
			}

			if (!this.detailObj.repairResult) {
				this.$Message.warning({ content: this.$t('请选择维修结果'), duration: 6, closable: true });
				return;
			}

			if (this.detailObj.repairResult == 3 && !this.detailObj.observeDays) {
				this.$Message.warning({ content: this.$t('请输入观察天数'), duration: 6, closable: true });
				return;
			}

			if (this.detailObj.repairResult == 2 && !this.detailObj.unqualifiedReason) {
				this.$Message.warning({ content: this.$t('请输入不合格原因'), duration: 6, closable: true });
				return;
			}

			let params = {
				id: this.detailObj.id,
				serviceAttitudeScore: this.detailObj.serviceAttitudeScore,
				technicalSkillsScore: this.detailObj.technicalSkillsScore,
				responseSpeedScore: this.detailObj.responseSpeedScore,
				repairResult: this.detailObj.repairResult,
			};

			if (params.repairResult == 2) params.unqualifiedReason = this.detailObj.unqualifiedReason;
			if (params.repairResult == 3) params.observeDays = this.detailObj.observeDays;
			this.axios({
				method: 'post',
				url: '/dms/deviceMaintenanceWorkOrder/checkAndAccept',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.showcheckBtn = false;
					this.$Message.success(res.msg);
					this.getDetailInfo();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		toCounteroffer() {
			if (!this.reanalyzeObj.faultGrade) {
				this.$Message.warning({ content: `${this.$t('请选择')}${this.$t('故障等级')}`, duration: 6, closable: true });
				return;
			}
			if (this.reanalyzeObj.faultGrade === 'A' || this.reanalyzeObj.faultGrade === 'B') {
				if (!this.reanalyzeObj.faultAnalyse) {
					this.$Message.warning({ content: `${this.$t('请选择')}${this.$t('故障分析')}`, duration: 6, closable: true });
					return;
				}
			}
			if (this.reanalyzeObj.faultAnalyse === 1) {
				if (!this.reanalyzeObj.principal || this.reanalyzeObj.principal.length === 0) {
					this.$Message.warning({ content: `${this.$t('请选择')}${this.$t('负责人')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.participant || this.reanalyzeObj.participant.length === 0) {
					this.$Message.warning({ content: `${this.$t('请选择')}${this.$t('成员')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.problemDescription) {
					this.$Message.warning({ content: `${this.$t('请输入')}${this.$t('问题描述')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.containmentAction) {
					this.$Message.warning({ content: `${this.$t('请输入')}${this.$t('围堵对策')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.rootCause) {
					this.$Message.warning({ content: `${this.$t('请输入')}${this.$t('根本原因')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.correctiveAction) {
					this.$Message.warning({ content: `${this.$t('请输入')}${this.$t('纠正措施')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.verificationCorrectionAction) {
					this.$Message.warning({ content: `${this.$t('请输入')}${this.$t('有效性验证')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.permanentPreventAction) {
					this.$Message.warning({ content: `${this.$t('请输入')}${this.$t('永久纠正措施执行以预防再次发生')}`, duration: 6, closable: true });
					return;
				}
				if (!this.reanalyzeObj.congratulateTeam) {
					this.$Message.warning({ content: `${this.$t('请输入')}${this.$t('祝贺团队工作成绩并结案')}`, duration: 6, closable: true });
					return;
				}
			}
			if (this.reanalyzeObj.faultAnalyse === 2) {
				for (let item of this.reanalyzeObj.whyList) {
					if (item.analyse === '') {
						this.$Message.warning({ content: this.$t('请填写完整或删除空白项'), duration: 6, closable: true });
						return;
					}
				}
			}
			let params = {
				id: this.detailObj.id,
				// ...this.reanalyzeObj
			};
			const {
				faultGrade,
				faultAnalyse,
				problemDescription,
				containmentAction,
				rootCause,
				correctiveAction,
				verificationCorrectionAction,
				permanentPreventAction,
				congratulateTeam,
				principal,
				participant,
				whyList,
			} = this.reanalyzeObj;
			if (this.reanalyzeObj.faultGrade === 'A') {
				params = {
					...params,
					faultGrade,
					faultAnalyse,
					problemDescription,
					containmentAction,
					rootCause,
					correctiveAction,
					verificationCorrectionAction,
					permanentPreventAction,
					congratulateTeam,
					principal,
					participant,
				};
			}
			if (this.reanalyzeObj.faultGrade === 'B') {
				params = {
					...params,
					faultGrade,
					faultAnalyse,
					whyList,
				};
				params.whyList = params.whyList.map((item, index) => {
					return { ...item, sort: index + 1 };
				});
			}
			if (this.reanalyzeObj.faultGrade === 'C') {
				params = {
					...params,
					faultGrade,
					faultAnalyse,
				};
			}

			this.axios({
				method: 'post',
				url: '/dms/workOrder/replay',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.$Message.success(res.msg);
					this.getDetailInfo();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		toReview() {
			const { reviewTime, reviewResult, id } = this.detailObj;

			if (!reviewResult) {
				this.$Message.warning({ content: this.$t('请输入维修结果'), duration: 6, closable: true });
				return;
			}
			if (!reviewTime) {
				this.$Message.warning({ content: this.$t('请选择复核时间'), duration: 6, closable: true });
				return;
			}
			let params = { reviewTime: moment(reviewTime).format('YYYY-MM-DD HH:mm:ss'), reviewResult, id };

			this.axios({
				method: 'post',
				url: '/dms/workOrder/review',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.$Message.success(res.msg);
					this.getDetailInfo();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.handle-btn-wrap {
	display: inline-block;
	float: right;
	vertical-align: top;
	.handle-btn-item {
		display: inline-block;
		vertical-align: top;
		margin-left: 20px;
		cursor: pointer;
		.icon {
			margin-right: 0;
			font-size: 15px;
		}
	}
}
.btnEle {
	text-align: center;
	margin-top: 20px;
}

.dateform {
	margin-top: 4px;
}

::v-deep .ivu-icon-md-add {
	font-size: 20px;
}

::v-deep .ivu-rate-star {
	&::before {
		font-size: 30px;
	}
}

.icon {
	cursor: pointer;

	&:first-child {
		margin-right: 20px;
	}
}

.basic-info {
	::v-deep .ivu-select-selection {
		border: none;
	}

	.basic-info-title {
		span {
			display: inline-block;
			width: 7px;
			height: 24px;
			background: #187bdb;
		}

		h2 {
			display: inline-block;
			font-size: 16px;
			padding-left: 16px;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: -2px;
				width: 7px;
				height: 24px;
				background: #187bdb;
			}
		}
	}

	.basic-info-body {
		//margin: 15px 10px;
		color: #333;
		font-size: 13px;
		font-family: 'Arial Normal', 'Arial', sans-serif;
		font-weight: 400;
		border-left: 1px solid #eee;

		.editWrap {
			position: relative;

			.editTime {
				position: absolute;
				cursor: pointer;
				right: 10px;
				top: 0;
				color: #187bdb;
				font-size: 14px;

				.icon {
					font-size: 30px;
					vertical-align: middle;
				}
			}
		}

		.basic-info-body-label {
			display: inline-block;
			height: 40px;
			line-height: 40px;
			background: #f5f6f7;
			text-align: left;
			padding: 0 10px;
			border-right: 1px solid #eee;
			/*border-top: 1px solid #B6B7B7;*/
			/*border-bottom: 1px solid #B6B7B7;*/
			.fspan {
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.basic-info-body-item {
			display: inline-block;
			height: 40px;
			line-height: 40px;
			text-align: left;
			padding: 0 10px;
			border-right: 1px solid #eee;
			// border-right: 1px solid #eee;

			.preview {
				position: absolute;
				right: 10px;
				top: 0;
				width: 40px;
				height: 40px;
				background: #eee;

				.preview-img {
					width: 40px;
					height: 40px;
					overflow: hidden;
				}
			}

			::v-deep .ivu-upload-drag {
				display: flex;
				height: 40px;

				button {
					margin-top: 4px;
				}
			}

			.fileWrap {
				flex: 1;
				display: flex;
				overflow-y: scroll;
				flex-direction: column;

				&::-webkit-scrollbar {
					width: 4px;
				}
			}

			.file-list {
				padding-left: 20px;
			}
		}
	}

	.file-style {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #187bdb;
		cursor: pointer;
	}
}

.over-wrapper {
	width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/deep/ .ivu-upload-drag:hover {
	border: none;
}

/deep/ .ivu-upload-drag {
	border: none;
}
</style>
